<template>
  <div>
    <div  v-if="goods.length">
      <div class="copyHtml best-container">
        <div>
          <div class="hot">
            <div class="hot-item">
              <a href="#"><img
                  :src='goods[0].detailList[0].picUrl' /></a>
            </div>
          </div>
        </div>
        <div>
          <div id="boxhomeCoupon">
            <img src="../../assets/images/youhui.jpg"
              alt="" />
          </div>
        </div>
        <div>
          <div class="hot">
            <div class="hot-item">
              <a href="#"><img
                  src="https://cdn.bestseller.com.cn/assets/wechat/SELECTED/image/SELECTEDDA00597662-1604240504720.jpg" /></a>
            </div>
          </div>
        </div>
        <div>
          <div class="flex category">
            <div class="hot-item flow-item">
              <a href="#"><img
                  src="https://cdn.bestseller.com.cn/assets/wechat/SELECTED/image/SELECTEDDA00597662-1604150374969.jpg" /></a>
            </div>
            <div class="hot-item flow-item">
              <a href="#"><img
                  src="https://cdn.bestseller.com.cn/assets/wechat/SELECTED/image/SELECTEDDA00597662-1604150463220.jpg" /></a>
            </div>
          </div>
        </div>
        <div>
          <div class="flex category">
            <div class="hot-item flow-item">
              <a href="#"><img
                  src="https://cdn.bestseller.com.cn/assets/wechat/SELECTED/image/SELECTEDDA00597662-1604150575123.jpg" /></a>
            </div>
            <div class="hot-item flow-item">
              <a href="#"><img
                  src="https://cdn.bestseller.com.cn/assets/wechat/SELECTED/image/SELECTEDDA00597662-1604150539187.jpg" /></a>
            </div>
          </div>
        </div>
        <div>
          <div class="hot">
            <div class="hot-item">
              <a href="#"><img
                  src="https://cdn.bestseller.com.cn/assets/wechat/SELECTED/image/SELECTEDDA00597662-1604149014437.jpg" /></a>
            </div>
          </div>
        </div>
        <!-- ----------------------------- -->
        <div>
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in goods[5].detailList" :key="index" style="height:600px;">
              <img v-lazy="image.picUrl" width="100%" height="100%" @click="fnTurn(image.code)"/>
            </van-swipe-item>
          </van-swipe>
        </div>



        <div v-for="(ite,idx) in goodMain" :key='idx'>
          <div>
            <div class="hot">
              <div class="hot-item" v-if="ite.detailList[0].picUrl">
                <img :src='ite.detailList[0].picUrl' alt="" @click="fnTurn(ite.detailList[0].code)">


               
              </div>
            </div>
          </div>
          <div>
            <div class="rollHorizontally" v-if="goodItems[idx].detailList">
              <div v-for="(item,index) in goodItems[idx].detailList" :key='index'
                class="six-four-item rollHorizontallyImg" @click="fnToDetail(item.code)">

                <router-link to=''>

                  <img :src='item.picUrl' alt="">

                </router-link>

              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="hot">
            <div class="hot-item">
              <a href=""><img
                  src="https://cdn.bestseller.com.cn/assets/wechat/SELECTED/image/SELECTEDDA00597662-1604163699173.jpg" /></a>
            </div>
          </div>
        </div>
        <div>
          <div class="flex category">
            <div class="hot-item flow-item" v-for="(item,index) in goods[23].detailList" :key='index'
            @click="fnToDetail(item.code)"
            >
             <img
                  :src="item.picUrl" />
            </div>
           
          </div>
        </div>
        <div>
          <div class="category-four flex-start">
            <div class="four-item" v-for="(item,index) in goods[25].detailList" :key='index'
            @click="fnToDetail(item.code)"
            >
              <img
                  :src="item.picUrl" />
            </div>
          </div>
        </div>
        <div>
          <div class="category-four flex-start">



            <div class="four-item" v-for="(item,index) in goods[26].detailList" :key='index'
            @click="fnToDetail(item.code)"
            >
              <img
                  :src="item.picUrl" />
            </div>
          </div>
        </div>


        <div>
          <div class="hot">
            <div class="hot-item" @click="fnToDetail(goods[27].detailList[0].code)">
             <img
                  :src="goods[27].detailList[0].picUrl" />
            </div>
          </div>
        </div>
      </div>
      <div class="bot">
        <div class="bot_box">
          <div class="bot_2">2013 Bestseller.All Right Reserved</div>
          <div class="bot_3">
            <a target="_blank" href="https://beian.miit.gov.cn/">
              津ICP备12007886号 -4
            </a>
          </div>
          <div class="bot_3">
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12011402000596"><img
                src="https://cdn.bestseller.com.cn/assets/common/image/bah.png" alt="" />
              <p>津公网安备&nbsp;12011402000596号</p>
            </a>
          </div>
          <div class="bot_4">
            <a href="https://cdn.bestseller.com.cn/assets/h5/SELECTED/image/Businesslicense.jpg"
              style="color: #000">(营业执照)</a>
            <a href="/user/ServiceProtocol" style="color: #000">用户服务协议及隐私政策</a>
          </div>
        </div>
      </div>
      <div></div>
      <div id="contactCustomerService" class="contactCustomerService"></div>
      <div id="scrollTop" class="scroll-top1">Λ</div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {
    ContactList,
    Lazyload
  } from 'vant';
  import router from '../.././router'
  Vue.use(Lazyload);
  import Axios from 'axios';

  import {
    goodsHome
  } from '@/api/goodsHome'

  export default {
    data() {
      return {
        goods: [],
      }
    },

    async created() {
      let res = await goodsHome();
      // console.log(res);
      this.goods = res.data.data
      console.log(this.goods)
    },
    updated () {
      console.log(this.goodMain);
      console.log(this.goodItems);
    },
    computed: {
      goodMain() {
        let a = [];
        for (var i = 6; i < 22; i++) {
          if (this.goods[i].moduleType == "hot") {
            a.push(this.goods[i])
          }
        }
        return a
      },
      goodItems() {
        let b = [];
        for (let j = 7; j < this.goods.length; j++) {
          if (this.goods[j].moduleType == "rollHorizontally") {
            b.push(this.goods[j])
          }
        }
        return b
      },
    },

    components: {
      // goodlist,
    },
    methods: {
      fnTurn(code) {
        console.log(code);
        this.$router.push({
          name: 'goodsList',
          params: {
            classifyId: code
          }
        })
      },
      fnToDetail(code) {
        code = code.slice(0, -3)
        console.log(code);
        this.$router.push({

          name: 'details',
          params: {
            goodsCode: code
          }
        })
      }
    },
  };
</script>

<style lang="scss" scoped>
  @import url(../../assets/css/default.css);

  #scrollTop {
    background: rgba($color: #555, $alpha: .5);
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    top: 65%;
    right: 1%;
  }
</style>